<template>
    <div class="big-block">
        <Title>设备分析</Title>
        <div style="width: 100%; height: 90%">
            <Chart :option="option" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Title from '../title.vue';
import Chart from '@/components/echarts/base-chart.vue';
import allData from '../../assets/data/stock.json';
import echarts, { ECOption } from '@/components/echarts/base';
import { getFontSize, getChartSize, getCurrentScale } from '../../utils/calculate';

const currentIndex = ref(0);
const option = ref<ECOption>({
    series: getSeries()
});

function getSeries(): ECOption['series'] {
    const centerArr = [
        ['18%', '40%'],
        ['50%', '40%'],
        ['82%', '40%'],
        ['34%', '75%'],
        ['66%', '75%']
    ];
    const colorArr = [
        ['#4FF778', '#0BA82C'],
        ['#E5DD45', '#E8B11C'],
        ['#E8821C', '#E55445'],
        ['#5052EE', '#AB6EE5'],
        ['#23E5E5', '#2E72BF']
    ];
    // 处理图表需要的数据
    const start = currentIndex.value * 5;
    const end = (currentIndex.value + 1) * 5;
    const showData = allData.slice(start, end);

    const titleFontSize = (480 / 100) * 3.6 * getCurrentScale();
    const innerRadius = titleFontSize * 2.8;
    const outerRadius = innerRadius * 1.125;

    return showData.map((item, index) => {
        return {
            type: 'pie',
            center: centerArr[index],
            radius: [outerRadius, innerRadius],
            emphasis: {
                scale: false
            },
            labelLine: {
                show: false // 隐藏指示线
            },
            data: [
                {
                    name: item.name + '\n\n' + item.sales,
                    value: item.sales,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            {
                                offset: 0,
                                color: colorArr[index][0]
                            },
                            {
                                offset: 1,
                                color: colorArr[index][1]
                            }
                        ])
                    },
                    label: {
                        position: 'center',
                        color: colorArr[index][0],
                        fontSize: titleFontSize / 1.2
                    }
                },
                {
                    value: item.stock,
                    itemStyle: {
                        color: '#333843'
                    }
                }
            ]
        };
    });
}
</script>

<style lang="scss" scoped>
.big-block {
    width: 100%;
    height: 100%;
}
</style>
